<template>
  <div class="tileset-manage">
    
    <side-layout title="图集"
      v-bind:data-list="tilesetsData"
      v-bind:selected-data="tilesetSelected"
      get-api="getTileset"
      v-bind:add-api="createHandler"
      delete-api="deleteTileset"
      rename-api="renameTileset"
      v-bind:content-style="{ display: 'flex', flexDirection: 'column', width: 'calc(100% - 150px)' }"
      v-bind:on-change="changeTileset"
      v-on:on-update="updateTilesetData">
      
      <div class="tileset-image-title">
        <Button type="primary" v-on:click="tilesetUploadHandler">添加图块</Button>
        <Button type="error" v-on:click="deleteTilesetImages">删除图块</Button>
        <Checkbox v-on:on-change="selectAllHandler">全选</Checkbox>
      </div>
      <div class="tileset-image-show">
        <div class="tileset-image-wrapper" v-if="tilesetImagesData" v-bind:style="tilesetImagesStyle">
          <div class="tileset-image-row" v-for="row in tilesetRowNum">
            <image-show
              v-for="(image, index) in tilesetRow(row)"
              v-bind:key="index"
              v-bind:style="tilesetImageStyle"
              v-bind:src="image.src"></image-show>
            <Checkbox v-model="tilesetImagesSelected[row - 1]" size="large" class="cm-margin-left-10"></Checkbox>
          </div>
        </div>
      </div>
      
      <Spin fix v-if="isImageLoading"></Spin>
      
    </side-layout>
    
    <Modal
      v-model="createModal"
      title="创建图集">
      <Form ref="createForm" v-bind:model="createForm" v-bind:rules="createValidate" v-bind:label-width="80">
        <FormItem label="图集名称" prop="tileset">
          <div>图集名称不得包含 \ / : * ? " < > | 等特殊符号，不得重复</div>
          <Input v-model="createForm.tileset" placeholder="请输入图集名称" />
        </FormItem>
        <FormItem label="图集列数" prop="colNum">
          <InputNumber v-bind:max="100" v-bind:min="1" v-model="createForm.colNum"></InputNumber>
        </FormItem>
        <FormItem label="单元尺寸">
          <Row>
            <Col span="2">
              <span>宽</span>
            </Col>
            <Col span="10">
              <FormItem prop="width">
                <InputNumber v-bind:max="1000" v-bind:min="1" v-model="createForm.width"></InputNumber>
              </FormItem>
            </Col>
            <Col span="2">
              <span>高</span>
            </Col>
            <Col span="10">
              <FormItem prop="height">
                <InputNumber v-bind:max="1000" v-bind:min="1" v-model="createForm.height"></InputNumber>
              </FormItem>
            </Col>
          </Row>
        </FormItem>
      </Form>
      <div slot="footer">
         <Button v-on:click="createModal = false">取消</Button>
         <Button type="primary" v-bind:loading="createLoading" v-on:click="createTileset">确定</Button>
      </div>
    </Modal>
    
    <Modal
      v-model="tilesetUploadModal"
      title="添加图集">
      <div class="cm-margin-bottom-5">上传图片扩展图集</div>
      <div class="cm-margin-bottom-5">图片将以该图集设定好的固定尺寸({{ showSize }})被分割添加到图集中</div>
      <div class="cm-margin-bottom-5">如果图片不能填满一行，将补充空白图片</div>
      <Upload
        ref="tilesetUpload"
        type="drag"
        name="image"
        v-bind:format="['jpg', 'jpeg', 'png']"
        v-bind:action="tilesetUploadApi"
        v-bind:data="uploadTilesetData"
        v-bind:on-success="tilesetUploadSuccess">
        <div style="padding: 20px 0">
          <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
          <p>点击或拖拽上传</p>
        </div>
      </Upload>
    </Modal>
    
  </div>
</template>

<script src="./tilesetManage.js"></script>

<style lang="stylus">
@import './tilesetManage.styl'
</style>
